<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
    <div>
        <v-card>
            <v-card-title>
                <v-btn color="primary">新增</v-btn>
                <v-spacer/>
                <v-fles xs3>
                    <v-text-field label="输入关键字搜索" v-model="key" @keyup.enter="loadData" append-icon="search" hide-details/>
                </v-fles>
            </v-card-title>
            <!--分割线-->
            <v-divider/>
            <v-data-table
                    :headers="headers"
                    :items="brands"
                    :pagination.sync="pagination"
                    :total-items="totalBrands"
                    :loading="loading"
                    class="elevation-1"
            >
                <template v-slot:items="props">
                    <tr>
                        <td class="text-xs-center">{{ props.item.id }}</td>
                        <td class="text-xs-center">{{ props.item.name }}</td>
                        <td class="text-xs-center">
                            <img :src="props.item.image">
                        </td>
                        <td class="text-xs-center">{{ props.item.letter }}</td>
                        <td class="justify-center layout">
                            <v-btn icon @click="editBrand(props.item)">
                                <i class="el-icon-edit"/>
                            </v-btn>
                            <v-btn icon @click="deleteBrand(props.item)">
                                <i class="el-icon-delete"/>
                            </v-btn>
                        </td>
                    </tr>
                </template>
            </v-data-table>
        </v-card>
    </div>
</template>

<script>
    export default {
        name: "myBrand",
        data() {
            return {
                search: '',
                totalBrands: 10,
                brands: [],
                loading: true,
                pagination: {},
                headers: [
                    {text: '品牌id', align: 'center', value: 'id'},
                    {text: '品牌名称', align: 'center', sortable: false, value: 'name'},
                    {text: '品牌LOGO', align: 'center', sortable: false, value: 'image'},
                    {text: '品牌首字母', align: 'center', value: 'letter'},
                    {text: '操作', align: 'center', value: 'id', sortable: false}
                ],
                key:""
            }
        },
        created() {
            this.loadData()
        },
        watch:{
            pagination:{
                deep:true,
                handler(){
                    this.loadData()
                }
            }
        },
        methods:{
            loadData(){
                this.loading = true;
                this.$http.get("/item/brand/page",{
                    params:{
                        key:this.key.toUpperCase(),
                        page:this.pagination.page,
                        rows: this.pagination.rowsPerPage,// 每页大小
                        sortBy: this.pagination.sortBy,// 排序字段
                        desc: this.pagination.descending// 是否降序
                    }
                })
                    .then(resp => {
                        this.brands = resp.data.items;
                        this.totalBrands = resp.data.total;
                        this.loading = false;
                    })
                    .catch(error => {
                        this.brands = [];
                        this.totalBrands = 0;
                        this.loading = false;
                    });

            }
        }
    }
</script>

<style scoped>

</style>